<template>
    <div v-if="show.showLine" class="m-title-box" :class="[lineCls]">
        <div class="m-title-content" :style="fontStyle">
            <span :style="titleSpace">{{getName(customTitle)}}</span>
        </div>
    </div>
    <groupHeader
        v-else
        :fontSize="fnSize"
        :type="options.groupStyle"
        :title="customTitle"
        :bg-color="colorArr[options.bgColor]"
        :fontStyle="fontStyle"
        :color="color"
    />
    <div class="describe" v-if="options.describe">
        <div v-html="options.describe"></div>
    </div>
</template>

<script>
import MForm from "../js/MForm";
import groupHeader from "@/views/modules/form/customForm/layout/groupHeader.vue";
import color from "@/views/modules/form/customForm/js/color.js";
export default {
    name: "MTitle",
    mixins: [MForm],
    components:{
        groupHeader
    },
    data(){
        return{
            options:{},
            colorArr:color
        }
    },
    created(){
        this.options = this.metadata.options
    },
    computed: {
        lineCls() {
            //显示分割线
            let {showLine, dashed} = this.metadata.options;
            if (showLine) {
                return dashed ? 'm-solid-line' : 'm-dashed-line'
            }
            return ''
        },
        fontStyle() {
            let {fontStyle, fontSize, orientation, color} = this.metadata.options;
            return {fontWeight: fontStyle, fontSize, textAlign: orientation, color}
        },
        titleSpace() {
            let {orientationMargin, orientation} = this.metadata.options;
            if (orientation === 'center') {
                return {}
            } else {
                return {
                    [`padding-${orientation}`]: `${orientationMargin}px`,
                    display: 'inline-block'
                }
            }
        },
        show() {
            let {showLine, showTitle} = this.metadata.options;
            return {showLine, showTitle};
        },
        fnSize(){
            return `${this.fontSize}px`
        },
        customTitle(){
            let {conditionConfig} = this.metadata.options;
            if(conditionConfig && conditionConfig.condition){
                let { condition } = conditionConfig ;
                if(!condition.includes('return')){
                    condition = `return ${condition}`
                }
                let {contextData} = this ;
                if(!contextData){
                    contextData = {}
                }
                let fn = new Function('ctx',condition).call(this,contextData)
                return fn ;
            }
            return this.metadata.name ;
        }
    },
    methods:{
        getName() {
            let {name, options: {conditionConfig}} = this.metadata;
            if (conditionConfig && conditionConfig.condition) {
                let condition = conditionConfig.condition;
                if (!condition.includes('return')) {
                    condition = `return ${condition}`
                }
                let n = new Function(condition).call(this.formVm)
                return n;
            }
            let lan = uni.getStorageSync("language");
            return name[lan]
        },
    }
}
</script>

<style scoped>
.describe{
    padding: 4px 0;
}
.m-title-box {
    position: relative;
}

.m-title-content {
    margin: .625rem 0;
}

.m-title-box.m-solid-line::before,
.m-title-box.m-dashed-line::before {
    content: '';
    display: inline-block;
    height: 0;
    border-bottom-width: 1px;
    border-bottom-color: #f4f5f6;
    border-bottom-style: solid;
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: 0;
}

.m-title-box.m-dashed-line::before {
    border-bottom-style: dashed;
}

.m-title-content > span {
    position: relative;
    z-index: 1;
    background-color: white;
    padding: 0.5rem;
}

.m-title-box {
}

</style>
